<template>
  <div class="app-container">
    <div class="container">
      <!-- 第一部分 -->
      <el-row :gutter="20">
        <el-col :span="17">
          <!-- 轮播 -->
          <el-carousel height="260px">
            <el-carousel-item v-for="item in 4" :key="item">
              <img
                src="../../assets/images/community/carousel-1.png"
                width="100%"
                height="100%"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="7">
          <div class="banner-links">
            <ul>
              <li
                v-for="(item, index) in linksList"
                :key="index"
                :style="'background-image:url(' + item.imgUrl + ');'"
              >
                <a :href="item.url">
                  <span class="title">{{ item.title }}</span>
                  <span class="subtitle">{{ item.subtitle }}</span>
                </a>
                <i class="el-icon-arrow-right"></i>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <!-- 第二部分 -->
      <div class="recommend">
        <div
          class="recommend-item"
          v-for="(item, index) in recommendList"
          :key="index"
        >
          <div class="recommend-title">{{ item.title }}</div>
          <div class="recommend-list">
            <ul>
              <li v-for="(items, index) in item.list">
                <a :href="items.url">
                  <img :src="items.imgUrl" :title="items.titleName" />
                  <div>
                    <span class="community-name"> {{ items.titleName }}</span>
                    <span class="community-follower"> {{ items.num }}成员</span>
                  </div>
                </a>
                <button>加入</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 第三部分 -->
      <el-row :gutter="20">
        <el-col :span="17">
          <div class="topic">
            <div class="topic-info">
              <div class="item-inner">
                <div class="user-title">
                  <a href="">
                    <img src="../../assets/logo.png" alt="" class="head" />
                    <span class="name">贝哲斯信息咨询中心</span>
                  </a>
                  <span class="cop">
                    <span class="cop-p">5分钟</span>
                  </span>
                </div>
                <div class="content">
                  <a href="" class="">
                    <div class="content-title">
                      测厚装置市场最新技术和机会分析
                    </div>
                  </a>
                  <div class="rich-text">
                    <a href="">
                      <div class="item-title">
                        <div class="item-desc">
                          基于过去几年测厚装置市场规模及增长趋势，贝哲斯咨询预测测厚装置行业未来5年的发展轨迹及市场规模。报告细分到产品分类、应用领域分类、全球及各地区产量、销量、进出口情况、行业投资前景及风险。通过本报告，所有用户都能对测厚装置行业有清晰的见解。
                          报告出
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="cover-img">
                <img src="../../assets/images/swaper1.png" alt="" />
              </div>
            </div>
            <div class="topic-bottom">
              <div class="item-foot">
                <div class="handle-item">
                  <i class="el-icon-view"></i>
                  <span class="num">浏览</span>
                </div>
                <div class="handle-item">
                  <i class="el-icon-star-on"></i>
                  <span class="num">评分</span>
                </div>
                <div class="handle-item">
                  <i class="el-icon-s-comment"></i>
                  <span class="num">回复</span>
                </div>
                <div class="handle-item">
                  <i class="el-icon-share"></i>
                  <span class="num">分享</span>
                </div>
              </div>
              <div class="item-right">来自：贝哲斯咨询社区</div>
            </div>
          </div>
          <div class="topic">
            <div class="topic-info">
              <div class="item-inner">
                <div class="user-title">
                  <a href="">
                    <img src="../../assets/logo.png" alt="" class="head" />
                    <span class="name">贝哲斯信息咨询中心</span>
                  </a>
                  <span class="cop">
                    <span class="cop-p">5分钟</span>
                  </span>
                </div>
                <div class="content">
                  <a href="" class="">
                    <div class="content-title">
                      测厚装置市场最新技术和机会分析
                    </div>
                  </a>
                  <div class="rich-text">
                    <a href="">
                      <div class="item-title">
                        <div class="item-desc">
                          基于过去几年测厚装置市场规模及增长趋势，贝哲斯咨询预测测厚装置行业未来5年的发展轨迹及市场规模。报告细分到产品分类、应用领域分类、全球及各地区产量、销量、进出口情况、行业投资前景及风险。通过本报告，所有用户都能对测厚装置行业有清晰的见解。
                          报告出
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <!-- <div class="cover-img">
                <img src="../../assets/images/swaper1.png" alt="" />
              </div> -->
            </div>
            <div class="topic-bottom">
              <div class="item-foot">
                <div class="handle-item">
                  <i class="el-icon-view"></i>
                  <span class="num">浏览</span>
                </div>
                <div class="handle-item">
                  <i class="el-icon-star-on"></i>
                  <span class="num">评分</span>
                </div>
                <div class="handle-item">
                  <i class="el-icon-s-comment"></i>
                  <span class="num">回复</span>
                </div>
                <div class="handle-item">
                  <i class="el-icon-share"></i>
                  <span class="num">分享</span>
                </div>
              </div>
              <div class="item-right">来自：贝哲斯咨询社区</div>
            </div>
          </div>
        </el-col>
        <el-col :span="7"> </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 社区中心
export default {
  name: 'community',
  data() {
    return {
      linksList: [
        {
          imgUrl: require('../../assets/images/community/swapper-1.png'),
          url: '',
          title: '创建社区',
          subtitle: '限时开放中'
        },
        {
          imgUrl: require('../../assets/images/community/swapper-2.png'),
          url: '',
          title: '活动专区',
          subtitle: '成长一夏 导师报名...'
        },
        {
          imgUrl: require('../../assets/images/community/swapper-3.png'),
          url: '',
          title: '社区公告',
          subtitle: '官方现身'
        },
        {
          imgUrl: require('../../assets/images/community/swapper-4.png'),
          url: '',
          title: '联系我们',
          subtitle: '交个朋友'
        }
      ],
      recommendList: [
        {
          title: '个人社区',
          list: [
            {
              url: '',
              imgUrl: require('../../assets/logo.png'),
              titleName: '橙子园（数据说）',
              num: '123'
            },
            {
              url: '',
              imgUrl: require('../../assets/logo.png'),
              titleName: '橙子园（数据说）',
              num: '123'
            },
            {
              url: '',
              imgUrl: require('../../assets/logo.png'),
              titleName: '橙子园（数据说）',
              num: '123'
            }
          ]
        },
        {
          title: '企业社区',
          list: [
            {
              imgUrl: '',
              titleName: '橙子园（数据说）',
              num: '123'
            }
          ]
        },
        {
          title: '官方社区',
          list: [
            {
              imgUrl: '',
              titleName: '橙子园（数据说）',
              num: '123'
            }
          ]
        },
        {
          title: '保证社区',
          list: [
            {
              imgUrl: '',
              titleName: '橙子园（数据说）',
              num: '123'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 15px 0px;
}
.banner-links {
  width: 338px;
  background-color: #fff;
  ul {
    li {
      height: 56px;
      margin-bottom: 12px;
      border-radius: 2px;
      overflow: hidden;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 50px;
      padding-right: 10px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #222226;
      }
      .subtitle {
        font-size: 14px;
        font-weight: 400;
        color: #777888;
        margin-left: 10px;
      }
    }
    li:last-child {
      margin-bottom: 0px;
    }
  }
}
.recommend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 32px;
  margin-bottom: 32px;
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  .recommend-item {
    display: inline-block;
    flex-basis: 21%;
    padding: 24px;
    overflow: hidden;
    position: relative;
    .recommend-title {
      margin-bottom: 20px;
      font-size: 16px;
    }
    .recommend-list {
      ul {
        li {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: start;
          -ms-flex-align: start;
          align-items: flex-start;
          margin-bottom: 16px;
          overflow: hidden;
          img {
            width: 44px;
            height: 44px;
            border: 1px solid #e8e8ed;
            border-radius: 2px;
          }
          a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            overflow: hidden;
            margin-right: auto;
          }
          a > div {
            overflow: hidden;
            margin-left: 8px;
            span {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              display: block;
            }
          }
          .community-name {
            font-size: 14px;
            font-weight: 400;
            color: #222226;
            line-height: 22px;
          }
          .community-follower {
            font-size: 12px;
            font-weight: 400;
            color: #555666;
            line-height: 20px;
          }
        }
        li:last-child {
          margin-bottom: 0px;
        }
        li > button {
          color: #555666;
          background-color: #fff;
          border-radius: 12px;
          margin-left: 12px;
          border: 1px solid #ccccd8;
          width: 48px;
          overflow: hidden;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          padding: 0;
          outline: none;
          -ms-flex-item-align: center;
          align-self: center;
          height: 24px;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }
  .recommend-item::after {
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: calc(100% - 48px);
    background: #f0f0f2;
  }
  .recommend-item:last-child::after {
    width: 0px;
  }
}
.topic {
  background-color: #fff;
  padding: 12px 0 0;
  border-bottom: 1px solid #f2f2f2;
  .topic-info {
    display: flex;
    .cover-img {
      width: 160px;
      background: #e8e8ed;
      border-radius: 2px;
      overflow: hidden;
      margin-left: 24px;
      height: 106px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-inner {
      flex: 1;
      .user-title {
        height: 32px;
        line-height: 32px;
        font-weight: 400;
        position: relative;
        background-color: #fff;
        display: flex;
        margin-bottom: 4px;
        align-items: center;
        a {
          display: flex;
          align-items: center;
        }
        .head {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          vertical-align: top;
          margin-right: 8px;
          border: 1px solid #f2f2f2;
        }
        .name {
          font-size: 14px;
          height: 32px;
          line-height: 32px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #555666;
          margin-right: 8px;
          max-width: 185px;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
        }
        .cop {
          line-height: 22px;
          display: inline-block;
          vertical-align: middle;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999aaa;
          margin-right: 8px;
          .cop-p {
            font-size: 14px;
            color: #777888;
          }
        }
      }
      .content {
        .content-title {
          margin-bottom: 4px;
          font-size: 16px;
          font-weight: 700;
          color: #222226;
          line-height: 24px;
          overflow: hidden;
          max-width: 600px;
          text-overflow: ellipsis;
          display: -webkit-box;
          margin-block-start: 0;
        }
        .rich-text {
          a {
            line-height: 32px;
            font-size: 28px;
            color: #222226;
            position: relative;
            display: block;
            min-height: 48px;
          }
          .item-title {
            font-size: 16px;
            font-weight: 400;
            color: #555666;
            line-height: 28px;
            word-break: break-all;
          }
          .item-desc {
            font-size: 14px;
            line-height: 24px;
            font-size: 15px;
            font-weight: 400;
            margin-bottom: 14px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
  .topic-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555666;
    font-size: 14px;
    line-height: 48px;
    height: 48px;
    width: 100%;
    .item-foot {
      display: flex;
      .handle-item {
        display: inline-block;

        cursor: pointer;
        margin-right: 32px;
        i {
          color: #999;
        }
        .num {
            margin-left: 3px;
          color: #999;
        }
      }
    }
    .item-right{
        color: #999;
    }
  }
}
</style>
